<template>
  <a-modal
    title="基础数据信息"
    :width="1000"
    :visible="visible"
    :confirmLoading="loading"
    :customers="customers"
    :suppliers="suppliers"
    :supplierTypes="supplierTypes"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="客户群">
              <a-select
                v-decorator="['customerId', {rules:[{required: true, message: '客户群'}]}]"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
              >
                <a-select-option v-for="d in customers" :key="d.customerId" :value="Number(d.customerId)">
                  {{d.wechatName}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="width: 100%">
          <a-col :span="24" style="width: 100%">
            <a-form-item label="代理商">
              <a-select
                v-decorator="['supplierId', {rules:[{required: true, message: '代理商'}]}]"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                @change="supplierSel"
              >
                <a-select-option v-for="d in suppliers" :key="d.supplierId" :value="d.supplierId">
                  {{d.wechatName}}/{{d.supplierName}}/{{d.type}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="广告主名称">
              <a-input placeholder="请填写广告主名称" v-decorator="['accountName',{ rules: [{ required: true, message: '请填写广告主名称' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="广告账户id">
              <a-input placeholder="请输入广告账户id" v-decorator="['accountId',{ rules: [{ required: true, message: '请输入广告账户id' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="账户类型">
              <a-input placeholder="请输入类型" disabled v-decorator="['accountType',{ rules: [{ required: true, message: '请输入类型' }] }] " />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="充值返点">
              <a-input placeholder="请输入类型" v-decorator="['rechargeDiscount',{ rules: [{ required: true, message: '请输入类型' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="总返点">
              <a-input placeholder="请输入总返点" v-decorator="['discount',{ rules: [{ required: true, message: '请输入总返点' }] }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="返点类型">
              <a-select
                v-decorator="['discountType',{ rules: [{ required: true, message: '请选择返点类型' }] }]"
                placeholder="请选择打款方式">
                <a-select-option value="货返">货返</a-select-option>
                <a-select-option value="现返">现返</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="打款方式">
              <a-select
                v-decorator="['payWay',{ rules: [{ required: true, message: '请选择打款方式' }] }]"
                placeholder="请选择打款方式">
                <a-select-option value="对公">对公</a-select-option>
                <a-select-option value="对私">对私</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="账户">
              <a-input placeholder="请输入账户" v-decorator="['account']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="账户密码">
              <a-input placeholder="请输入账户密码" v-decorator="['accountPassword']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="备注">
              <a-input placeholder="请输入供应商备注" v-decorator="['note']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="受理人">
              <a-select
                v-decorator="['handlerId', {rules:[{required: true, message: '受理人'}]}]"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
              >
                <a-select-option v-for="d in users" :key="d.userId" :value="Number(d.userId)">
                  {{d.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  components: {

  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    customers: {
      type: Array,
      default: () => null
    },
    suppliers: {
      type: Array,
      default: () => null
    },
    users: {
      type: Array,
      default: () => null
    },
    supplierTypes: {
      type: Array,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    supplierSel (supplierId) {
      const supplier = this.suppliers.find(a => {
        return a.supplierId === supplierId
      })
      this.form.setFieldsValue({ accountType: supplier.type })
    }
  },
  created () {
  }
}
</script>
